<template>
  <div class="home-data">
    <!-- 设备概览 -->
    <el-card class="box-card c-l">
      <div slot="header" class="clearfix">
        <span style="font-size: 12px; font-weight: bold">设备概览</span>
        <el-tooltip
          content="统计***"
          placement="bottom"
          style="margin-left: 2px; color: gray"
          effect="light"
        >
          <i class="iconfont icon-askoutline"></i>
        </el-tooltip>
        <el-button style="float: right; padding: 3px 0" type="text">
          绑定设备
        </el-button>
      </div>
      <div class="device-content">
        <img class="gateway" src="@/assets/photo/gateway.png" />
        <div class="line"></div>
        <div class="device-message">
          <div class="num">
            {{ deviceObj !== "" ? deviceObj.LoRaWAN.total : "" }}
          </div>
          <div class="text">LoRaWAN</div>
          <div>网关</div>
        </div>
        <div class="line"></div>
        <div class="device-message">
          <div class="num">
            {{ deviceObj !== "" ? deviceObj.LoRaPP.total : "" }}
          </div>
          <div class="text">LoRaPP</div>
          <div>网关</div>
        </div>
        <div class="line"></div>
        <div class="device-message">
          <div class="num">
            {{ deviceObj !== "" ? deviceObj.group : "" }}
          </div>
          <div class="text"></div>
          <div>群组</div>
        </div>
        <div class="line" style="height: 100px"></div>
        <i class="iconfont icon-yalichuanganqi chuanganqi"></i>
        <div class="device-message">
          <div class="num">
            {{ deviceObj !== "" ? deviceObj.sensor.total : "" }}
          </div>
          <div>传感器节点</div>
        </div>
      </div>
    </el-card>
    <!-- 监控 -->
    <el-card class="box-card c-r">
      <div slot="header" class="clearfix">
        <span style="font-size: 12px; font-weight: bold">监控</span>
        <el-tooltip
          content="统计***"
          placement="bottom"
          style="margin-left: 2px; color: gray"
          effect="light"
        >
          <i class="iconfont icon-askoutline"></i>
        </el-tooltip>
      </div>
      <div class="jiankong-block">
        <ul>
          <li>
            <span>网关离线</span>
            <span>{{ deviceObj.LoRaWAN.offline }}</span>
          </li>
          <li>
            <span>节点离线</span>
            <span>{{ deviceObj.LoRaPP.offline }}</span>
          </li>
          <li>
            <span>传感器低电量</span>
            <span style="background-color: rgb(251, 218, 219); color: red">{{
              deviceObj.sensor.lowBattery
            }}</span>
          </li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script>
import { $deviceCount } from "@/api/index.js";

export default {
  name: "Homedata",
  data() {
    return {
      // 对于从后台获取的对象，需要现在变量里定义一个默认值，为了渲染不报错
      deviceObj: {
        LoRaPP: "",
        LoRaWAN: "",
        group: "",
        sensor: "",
      },
    };
  },
  created() {
    $deviceCount().then((res) => {
      this.deviceObj = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.el-card {
  /deep/ .el-card__header {
    padding: 10px 10px;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
  }
}

.home-data {
  display: flex;
  .jiankong-block {
    li {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      margin: 10px 0;
      span {
        font-weight: bold;
      }
      span:last-child {
        background-color: rgb(221, 240, 224);
        padding: 2px 0;
        width: 56px;
        text-align: center;
        border-radius: 20px;
        color: green;
      }
    }
  }
}

.device-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .device-message {
    font-weight: bold;
    font-size: 12px;
    .num {
      font-size: 22px;
      line-height: 35px;
    }
    .text {
      height: 21px;
    }
  }
}

.c-l {
  width: 60%;
  margin-right: 10px;
  flex: 1;
}

.c-r {
  width: 30%;
}

.gateway {
  width: 40px;
  min-width: 40px;
}

.devNode2 {
  width: 15px;
  min-width: 15px;
}

.line {
  display: inline-block;
  width: 1px;
  height: 40px;
  margin: 0 8px;
  background-color: #dcdfe6;
}

.chuanganqi {
  display: block;
  transform: rotate(180deg);
  font-size: 40px;
  color: #91a8bf;
}
</style>
